<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <title>关于 - 在线拼图游戏</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
    <!-- Custom CSS styles-->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Scripts -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
    <script src="dmxAppConnect/dmxStripe/dmxStripe.js" defer=""></script>
    <link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
    <script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
    <script>
        function getParams(key) {
                    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) {
                        return decodeURI(r[2]);
                    }
                    return null;
            };
        var code = getParams("param1");
        if (code == 1) {
            alert("您上传的图片过大，请重新选择图片");
        }else if(code == 2){
            alert("您上传的图片类型不支持，请重新选择图片");
        }else if(code == 3){
            alert("您上传的图片已存在于服务器中，请重新选择图片");
        }
    </script>
</head>

<body is="dmx-app" id="about">
    <!-- Page content -->
    <div class="modal" id="modal1" is="dmx-bs4-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document" style="max-width:1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">答案提示&nbsp;</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p style="text-indent:2em;">为了让更多人能在您创建的自定义拼图游戏中获得精彩的游戏体验，您应当留意：</p>

                    <ul>
                        <li>图片应清晰、大小合适（建议使用 1024 x 768 像素或更高），没有任何链接、水印、白边、广告或时间戳。</li>
                        <li>图片尽量不要出现<b>大片相似且连续</b>的区域，例如纯色背景、天空背景等，它们会严重影响拼图游戏的体验，因为一般人很难分辨。</li>
                        <li>图片的内容和图片的名称应当富有吸引力。</li>
                        <li><b>图片内容必须符合国家法律规定！</b></li>

                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html"><i class="fa fa-puzzle-piece"></i>&nbsp;在线拼图游戏&nbsp;</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse align-self-start" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="index.html">主页</a> </li>
                <li class="nav-item active pl-2 pr-2"> <a class="nav-link" href="upload.html">创建拼图</a> </li>
                <li class="nav-item  pl-2 pr-2"> <a class="nav-link" href="about.html">关于</a> </li>
            </ul>
        </div>
    </nav>
    <section class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="text-center">创建拼图&nbsp;</h2>
                    <p style="text-indent:2em;">厌倦了主页上的精选拼图？不用担心，在这里，您只需要填写表单、点击上传按钮，就可以用您喜爱的图片，创建属于你自己的拼图游戏！不知道该用什么图片吗？请<a href="javascript:;" dmx-on:click="modal1.show()">点击这里</a>获得更多建议！</p>

                    <form action="upload_image.php" method="post" enctype="multipart/form-data">

                        <div class="form-group row">
                            <label for="input2" class="col-sm-2 col-form-label">拼图名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input2" name="puzzlename" aria-describedby="input2_help" placeholder="输入拼图名称" required="" maxlength="10" data-msg-required="该项为必填项。" data-msg-maxlength="请输入不超过 {0} 个字符。">
                                <small id="input2_help" class="form-text text-muted">对拼图图片的简短描述，不超过10个字符。</small>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="input3" class="col-sm-2 col-form-label">您的昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input3" name="customname" aria-describedby="input2_help" placeholder="输入您的昵称" required="" maxlength="10" data-msg-required="该项为必填项。" data-msg-maxlength="请输入不超过 {0} 个字符。">
                                <small id="input3_help" class="form-text text-muted">提供者的昵称将会显示在游戏页面中，不超过10个字符。</small>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="input1" class="col-sm-2 col-form-label">拼图图片</label>
                            <div class="col-sm-10">
                                <input type="file" class="form-control" id="customFile" name="filename" aria-describedby="input1_help" required="" data-msg-required="该项为必填项。">
                                <small id="input1_help" class="form-text text-muted">上传您将要构成拼图的图片，图片大小不超过3MB，支持jpg、jpeg、pjpeg、png、gif格式，图片内容必须符合国家法律规定。</small>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="align-self-center col-sm-12">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="" id="input3" name="input3" required="" data-msg-required="您必须保证上传的图片内容符合国家法律规定！">
                                    <label class="form-check-label" for="input3">我保证上传的图片内容符合国家法律规定&nbsp;</label>
                                </div>
                            </div>

                        </div><button id="btn1" class="btn btn-secondary" type="submit">上传&nbsp;</button>
                    </form>

                </div>
            </div>
        </div>
    </section>
    <footer class="bg-dark" id="upload-footer">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-center small mb-0 pt-2 pb-2 pl-1 pr-1 text-light">&copy; Copyright 2021. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Scripts -->
    <script src="bootstrap/4/js/popper.min.js"></script>
    <script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>